<template>
  
      <div class="container">
  
        <div class="top">
          <current ref="current" :checked="checked" :WarnValue_CO="WarnValue_CO" :tel="tel"></current>
  
        </div>
  
        <div class="bottom">
          <history ref="history"></history>
        </div>
  
        <div class="controlBar">
          <div class="left">
            每隔
            <a-input-number v-model="number2" :min="1" :max="100000" :step="1" @change="onChange2"
              :formatter="(value) => `${value}秒`" :parser="(value) => value.replace(/秒/g, '')" />
            刷新一次
          </div>
  
  
  
          <div style="padding-right: 3rem;">
            <div style=" display: flex;align-items:center;padding-bottom: 0.6rem;">
  
              <div style="padding-right: 0.6rem;">
                <span style="padding-right: 0.6rem">CO报警阈值（高位）</span>
                <a-input-number v-model="WarnValue_CO" :min="0" :max="100" :step="0.1" @change="setWarnValue_CO" />
              </div>
  
         
  
            </div>
  
            <div style=" display: flex;align-items:center;">
              <span style="padding-right: 0.6rem">手机号</span>
              <a-input v-model="tel" @change="setTel" />
              <div style="display: flex; flex-direction: row-reverse;padding-left: 0.6rem;">
              <a-switch @change="checkedChange" v-model="checked" checked-children="短信报警已开启"
                un-checked-children="短信报警已关闭" />
            </div>
            </div>
         
          </div>
  
  
          <div class="right">
     
            <div >
            <div style="display: flex;">
              <span style="padding-right: 0.9rem">CO工控机地址</span>
              <a-input :value="address_CO" @change="change_CO"></a-input>
              <a-button @click="close" v-show="IsStartCircle">取消</a-button><a-button @click="open" type="primary"
              v-show="!IsStartCircle">确定</a-button>
            </div>

              <div style="display: flex;align-items: center;">
              <div class="status" :style="`background-color:${statusColor1}`"></div>
              <span>{{ netStatus1 }}</span>
            </div>
  
              <!-- <a-button @click="close" v-show="IsStartCircle">取消</a-button>
              <a-button @click="open" type="primary"
                v-show="!IsStartCircle">确定</a-button> -->
            </div>
  
           
     
          </div>
  
  
  
        </div>
      </div>
  

  </template>
  
  <script>
  import current from "./co/current.vue";
  
  import history from "./co/history.vue";
  
  
  export default {
    components: {
      history, current
    },
    mounted() {
  
      let address_CO = localStorage.getItem("address_CO");

      this.tel = localStorage.getItem("tel") || "";
      this.WarnValue_CO = localStorage.getItem("WarnValue_CO") || 0.8;

  
      let isDev = process.env.NODE_ENV !== "production";
  
      if (
        address_CO == null ||
        address_CO == "null" ||
        address_CO == undefined ||
        address_CO == "" ||
        address_CO == "undefined"
      ) {
        if (isDev) {
          this.address_CO = "127.0.0.1";
        } else {
          this.address_CO = "192.168.10.166";
        }
      } else {
        this.address_CO = address_CO;
      }

  
      this.$ipcRenderer.on_connect_reply_CO(
        (type) => {

          if (type == "DF") {
             this.netStatus1 = "未连接";
             this.statusColor1 = "red";
          }
     
        }
      );

    },
    data() {
      return {
        address_CO: "127.0.0.1",
        number2: 30,
        circleInterval: null,
        checked: false,
        WarnValue_CO: 0.8,
        tel: "",
        IsStartCircle: false,
        netStatus1:"未连接",
        statusColor1:"red",

  
      };
    },
    methods: {
      status_connected1() {
        this.netStatus1 = "已连接";
        this.statusColor1 = "green"
      },
      status_disconnected1() {
        this.netStatus1 = "未连接";
        this.statusColor1 = "red"
  
      },

  
      setWarnValue_CO(e) {
        this.WarnValue_CO = e.target.value;
        localStorage.setItem("WarnValue_CO", e.target.value);
      },
  

      refresh() {
  
  
        this.$refs.history.getData();
       
  
      },
  
  
  
      open() {
        this.$ipcRenderer.send("connectServer_coc2h4", {address_CO:this.address_CO,address_C2H4:null});
   
  this.status_connected1();

        setTimeout(() => {
          this.startCircle();
          this.IsStartCircle = true;
        }, 600);
      },
      close() {
        this.$ipcRenderer.send("disConnectServer_coc2h4",{address_CO:this.address_CO,address_C2H4:null});

        this.stopCircle();
        this.IsStartCircle = false;
        this.status_disconnected1();

      },
      change_CO(e) {
        this.address_CO = e.target.value;
  
        localStorage.setItem("address_CO", e.target.value);
      },

  
      onChange2(value) {
        this.number2 = value;
      },
  
  
      startCircle() {
        this.circleDo();
        this.circleInterval = setInterval(() => {
          this.circleDo();
        }, Number(this.number2) * 1000);
      },
  
      stopCircle() {
        clearInterval(this.circleInterval);
        this.circleInterval = null;
      },
  
      circleDo() {
  
  
  
        this.$refs.current.refresh();
        this.$refs.history.getData();
  
      },
      checkedChange(value) {
        this.checked = value;
      },
  
  
      setTel(e) {
        this.tel = e.target.value;
        localStorage.setItem("tel", e.target.value);
      },
  
  
    },
  };
  </script>
  
  <style lang="less" >

  
  .controlBar {
    height: 10%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-radius: 10px;
    margin-top: 10px;
  
    .left {
      .ant-input-number {
        margin: 0 10px;
      }
  
      .ant-btn {
        margin-left: 10px;
      }
    }
  
    .right {
  display: flex;
  align-items: center;
      .ant-input,
      .status,
      .ant-btn {
        margin-left: 10px;
      }
    }
  
    .ant-input {
      width: 200px;
    }
  
    .status {
      height: 10px;
      width: 10px;
      border-radius: 50%;
      background-color: #ff0000;
      margin-right: 5px;
    }
  }
  
  .container {
    height: 100%;
    display: flex;
    flex-direction: column;
  
    .top {
      background-color: #fff;
      margin-bottom: 10px;
      padding: 20px;
  
    }
  
    .bottom {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
  
  }

  .status {
    background-color: #ff0000;
    height: 10px;
    width: 10px;
    border-radius: 50%;
  }
  </style>
  